<template>
  <div>
    <common-secondary-header title="检查部位及结果">
      <div v-if="!disabled" class="mb-[16px]">
        <t-button svgIcon="ic-btn-add" @click="onSafeAdd">新增检查部位</t-button>
      </div>
      <el-table :data="inspectionSiteCreateDTOList">
        <el-table-column label="检查部位" prop="checkArea" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="检查结果" prop="inspectionResult">
          <template slot-scope="{ row }">
            <span>{{ checkResultOptions[row.inspectionResult] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="检查说明" prop="inspectionDescription" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <span>{{ $isEmptyValue(row.inspectionDescription) ? "-" : row.inspectionDescription }}</span>
          </template>
        </el-table-column>
        <el-table-column label="整改措施" prop="correctiveAction" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <span>{{ $isEmptyValue(row.correctiveAction) ? "-" : row.correctiveAction }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="{ row, $index }">
            <el-link type="primary" :underline="false" @click="onSafeAdd(row)">查看</el-link>
            <el-link v-if="!disabled" type="danger" :underline="false" class="ml-[12px]" @click="onSiteDel(row, $index)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </common-secondary-header>
    <el-dialog :title="safePatrolPop.title" :visible.sync="safePatrolPop.visible">
      <el-form
        ref="safePatrolPop"
        :model="safePatrolPop.dataModel"
        label-width="74px"
        label-suffix=""
        size="small"
        :rules="safePatrolPop.rules"
        :disabled="safePatrolPop.disabled"
      >
        <el-form-item label="检查部位" prop="checkArea" class="!mr-0">
          <el-input
            v-model="safePatrolPop.dataModel.checkArea"
            placeholder="请输入检查部位"
            :maxlength="20"
            :show-word-limit="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="检查结果" prop="inspectionResult" class="!mr-0">
          <TSelector
            v-model="safePatrolPop.dataModel.inspectionResult"
            dictCode="check_results"
            :isAll="false"
            class="w-full"
            placeholder="请选择检查结果"
          />
        </el-form-item>
        <el-form-item
          v-if="safePatrolPop.dataModel.inspectionResult == 3"
          label="整改措施"
          prop="correctiveAction"
          class="!mr-0"
        >
          <el-input
            v-model="safePatrolPop.dataModel.correctiveAction"
            type="textarea"
            placeholder="请输入整改措施"
            :rows="3"
            :maxlength="2000"
            :show-word-limit="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="检查说明" prop="inspectionDescription" class="!mr-0">
          <el-input
            v-model="safePatrolPop.dataModel.inspectionDescription"
            type="textarea"
            placeholder="请输入检查说明"
            :rows="3"
            :maxlength="2000"
            :show-word-limit="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="附件" prop="attachmentVOList" class="!mb-0 !mr-0">
          <FileUploadBtn
            ref="fileUploadBtn"
            v-model="safePatrolPop.dataModel.attachmentVOList"
            :disabled="safePatrolPop.disabled"
            :limit="100"
            :size="200"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" class="common-search-btn" @click="safePatrolPop.visible = false">取 消</el-button>
        <el-button
          v-if="!safePatrolPop.disabled"
          type="primary"
          size="small"
          class="common-search-btn"
          @click="onSiteSave()"
          >添 加</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { clone } from "xe-utils";
import { inspectionSiteDetail, inspectionSiteDelete } from "@/api/inspection-site";

// 检查部位及结果
export default {
  name: "InspectionSite",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      inspectionSiteCreateDTOList: [],
      safePatrolPop: {
        visible: false,
        title: "",
        disabled: false,
        rules: {
          checkArea: [{ required: true, message: "请输入检查部位", trigger: "blur" }],
          inspectionResult: [{ required: true, message: "请选择检查结果", trigger: "change" }],
          correctiveAction: [{ required: true, message: "请输入整改措施", trigger: "blur" }],
        },
        dataModel: {},
        propItem: {
          qualityId: null,
          checkArea: "",
          inspectionResult: "",
          inspectionDescription: "",
          correctiveAction: null,
          attachmentVOList: [],
        },
      },
    };
  },
  computed: {
    // 检查性质
    checkResultOptions() {
      return this.$store.state.data.KV_MAP["check_results"];
    },
  },
  methods: {
    initForm(data) {
      this.inspectionSiteCreateDTOList = clone(data) || [];
    },
    paramForm() {
      const data = clone(this.inspectionSiteCreateDTOList);
      return data;
    },
    validForm() {
      if (!this.inspectionSiteCreateDTOList.length) {
        this.$message.error("请至少添加一条检查部位以及结果数据");
        return false;
      }
      return true;
    },
    async onSafeAdd(row) {
      const that = this;
      this.safePatrolPop.title = row ? "查看检查部位" : "新增检查部位";
      if (!row) {
        const { propItem } = { ...this.safePatrolPop };
        this.safePatrolPop.dataModel = clone(propItem);
        this.safePatrolPop.disabled = false;
        this.safePatrolPop.visible = true;
        this.$nextTick(function () {
          that.$refs["safePatrolPop"].clearValidate();
        });
        return;
      }
      this.safePatrolPop.disabled = true;
      if (row.id) {
        const data = await inspectionSiteDetail({ id: row.id });
        this.safePatrolPop.dataModel = clone(data);
        this.safePatrolPop.visible = true;
        this.$nextTick(function () {
          that.$refs["safePatrolPop"].clearValidate();
        });
      } else {
        this.safePatrolPop.dataModel = clone(row);
        this.safePatrolPop.visible = true;
        this.$nextTick(function () {
          that.$refs["safePatrolPop"].clearValidate();
        });
      }
    },
    onSiteDel(row, index) {
      this.$confirm(`确定是否删除？`, "确认信息", {
        type: "warning",
        cancelButtonClass: "common-confirm-cancel-btn",
        confirmButtonClass: "common-confirm-confirm-btn",
      })
        .then(async () => {
          if (row.id) {
            await inspectionSiteDelete({ id: row.id });
            this.inspectionSiteCreateDTOList.splice(index, 1);
          } else {
            this.inspectionSiteCreateDTOList.splice(index, 1);
          }
        })
        .catch(() => {
          this.$message.warning("已取消删除");
        });
    },
    onSiteSave() {
      if (!this.$refs["fileUploadBtn"].validForm()) return;
      this.$refs.safePatrolPop.validate((valid) => {
        if (valid) {
          const item = clone(this.safePatrolPop.dataModel);
          if (item.inspectionResult != 3) {
            item.correctiveAction = "";
          }
          if (Array.isArray(item.attachmentVOList)) {
            item.fileIdList = item.attachmentVOList.map((v) => {
              return v.id;
            });
          } else {
            item.fileIdList = [];
          }
          this.inspectionSiteCreateDTOList.push(item);
          this.safePatrolPop.visible = false;
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.label-24 {
  width: 11.11%;
}

:deep(.el-descriptions-item__content) {
  padding: 0 !important;
}

:deep(.el-descriptions-item__cell .el-form-item .el-input__inner),
:deep(.el-descriptions-item__cell .el-form-item .el-textarea__inner) {
  border-color: transparent !important;
  border-radius: 0 !important;
}

::v-deep .el-form-item__label {
  padding-right: 8px !important;
}
</style>
